<template>
    <div>
        <!-- 标签数据列表 -->
        <Table
            :tableHeader="tableHeader"
            :tableData="tableData"
            :tableLoading="listLoading"
            @handleSelect="handleSelect"
        >
        </Table>
    </div>
</template>

<script>
import { tags } from "@/api/system";
import Table from "@/components/Table";

export default {
    components: {
        Table
    },
    props: {
        tagsVisible: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            tableData: [],
            tableHeader: [
                {
                    type: "selection",
                    width: "40",
                    fixed: true,
                },
                {
                    label: "标签名称",
                    prop: "name",
                },
                {
                    label: "创建人",
                    prop: "createBy",
                },
                {
                    label: "创建时间",
                    prop: "createTime",
                },
            ],
            listLoading: false,
        };
    },
    watch: {
        tagsVisible: {
            handler(val) {
                if (val) {
                    this.getTagsData();
                } else {
                    this.tableData = [];
                    this.listLoading = false;
                }
            },
            immediate: true,
        },
    },
    methods: {
        getTagsData() {
            this.listLoading = true;
            tags("/all", "post")
                .then((res) => {
                    this.tableData = res.data;
                })
                .finally(() => (this.listLoading = false));
        },
        handleSelect(e) {
            this.$emit('handleTagsSelect',e);
        },
    },
};
</script>

<style lang="scss" scoped></style>
